<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      color: black;
      text-decoration: none;
    }

    .wrap {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;

    }

    .content {
      padding-top: 50px;
      flex: 1;
      overflow: auto;
    }

    .content h1 {
      width: max-content;
      margin: 40px auto;
    }

    .content h1 img {
      width: 100px;
    }

    .content form {
      width: 90%;
      height: 360px;
      margin: 0 auto;
      position: relative;
      /* border: 1px solid; */
      overflow: hidden;
      padding: 10px 5px;
      border-radius: 10px;
    }

    .content form label {
      font-size: 16px;
      width: 100%;
      height: max-content;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }

    .content form label:nth-of-type(3) {
      margin-top: 20px;
    }

    .content form label>span {
      width: 80px;
    }

    .content form label input {
      width: 215px;
      height: 40px;
      border: 1px solid;
      font-size: 16px;
      text-indent: 1rem;
      outline: none;
      border-radius: 10px;

    }

    .content form>button {
      width: 70%;
      height: 40px;
      background: brown;
      color: white;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      margin: 0 17%;
    }

    .content .proto {
      margin: 30px auto;
      width: 250px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .content .proto input {
      width: 20px;
      height: 20px;
      font-size: 12px;
      padding-left: 10px;
    }



    /* .content p {
      height: 500px;
      background: indianred;
      margin: 20px;
    } */

    .footer {
      height: 50px;
    }

    .footer ul {
      height: 100%;
      width: 100%;
      display: flex;
    }

    .footer ul li {
      height: 100%;
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-content: center;
      margin-bottom: 20px;
    }

    .footer ul li i {
      margin-top: .306667rem;
    }

    .footer ul li a {
      font-size: .16rem;
    }

    .top {
      width: 100vw;
      height: 50px;
      background: brown;
      position: fixed;
      top: 0;
      left: 0;

    }

    .top p {
      font-size: 30px;
      color: white;
      width: max-content;
      margin: 0 auto;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <!-- 头部 -->
    <div class="top">
      <i></i>
      <p>登录</p>
    </div>
    <div class="content">
      <h1><img src="../img/logo.png" alt=""></h1>
      <form action="#" method="post">
        <label for=""> <span>用户名：</span> <input type="text" placeholder="用户名" required></label><br>
        <label for=""> <span>密码：</span><input type="password" placeholder="密码" required></label>
        <div class="proto">
          <input type="checkbox" required><span>请您查看<a href="" style="color: red;">《用户需知》</a>并同意</span>
        </div>
        <button type="button">登录</button>
      </form>
    </div>
    <div class="footer">
      <ul>
        <li class="active"><i class="fa fa-home"></i><a href="">首页</a></li>
        <li><i class="fa fa-star"></i><a href="">律师帮您</a></li>
        <li><i class="fa fa-bolt"></i><a href="">圈子</a></li>
        <li><i class="fa fa-user"></i><a href="">我的</a></li>
      </ul>
    </div>
  </div>
  <!-- 底部导航固定部分 -->

</body>

</html>